<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Canvas</title>
    <style>
        html,
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
            /* background: gray; */
            /* border: 1px solid black; */
        }
    </style>
</head>

<body>
    <p id="scoreDisplay">分数: 0</p>
    <canvas id="myCanvas"></canvas>

    <script>

        // 脚本开始
        class Sphere {  // 球类
            constructor(x, y, z, radius, speed, isout) {  // 构造函数
                this.x = x;  // x坐标
                this.y = y;  // y坐标
                this.z = z;  // z坐标
                this.radius = radius;  // 半径
                this.speed = speed;  // 速度
                this.isout = isout;
            }  // 构造函数结束

        }  // 类结束
        class ImageObject {  // 新增的图片类
            constructor(src, width, height, x, y) {
                this.image = new Image();
                this.image.src = src;
                this.width = width;
                this.height = height;
                this.x = x;
                this.y = y;
            }
        }

        class Rectangle {  // 矩形类
            constructor(width, height, x, y) {  // 构造函数
                this.width = width;  // 宽度
                this.height = height;  // 高度
                this.x = x;  // x坐标
                this.y = y;  // y坐标
            }  // 构造函数结束
        }  // 类结束

        class Game {  // 游戏类
            constructor() {  // 构造函数
                /** @type {HTMLCanvasElement} */
                this.canvas = document.getElementById('myCanvas');  // 获取画布
                this.canvas.width = window.innerWidth
                this.canvas.height = window.innerHeight
                this.ctx = this.canvas.getContext('2d');  // 获取2D上下文
                this.score = 0;  // 分数初始化
                this.spheres = [];  // 球数组
                for (let i = 0; i < 100; i++) {  // 循环生成100个球
                    this.spheres.push(new Sphere(  // 添加新球
                        Math.random() * this.canvas.width,  // 随机x坐标
                        Math.random() * this.canvas.height,  // 随机y坐标
                        Math.random() * 100,  // 随机z坐标
                        20,  // 半径
                        2,
                        true  // 速度
                    ));  // 添加新球结束
                }  // 循环结束
                this.rectangle = new Rectangle(120, 20, 0, 0);  // 创建矩形

                // 创建 Audio 对象并设置音频文件路径
                this.boomSound = new Audio('path/to/boom.wav');
                // this.boomSound.play()

                // Create a temporary Image object to get image dimensions
                var tempImage = new Image();
                tempImage.src = "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png";

                // Wait for the temporary image to load
                tempImage.onload = () => {
                    // Now you can get the image dimensions
                    var www = tempImage.width;  // Replace www with the actual variable name you want to use
                    var hhh = tempImage.height; // Replace hhh with the actual variable name you want to use

                    // Create the ImageObject using the obtained dimensions
                    this.imageObject = new ImageObject(
                        "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                        www / 2,
                        hhh / 2,
                        0,
                        0
                    );

                };

                this.imageObject = new ImageObject();

                this.canvas.addEventListener('mousemove', this.handleMouseMove.bind(this));  // 监听鼠标移动事件
                this.canvas.addEventListener('touchmove', this.handleMouseMove.bind(this));

                this.update();  // 更新
            }  // 构造函数结束
            // 获取一个随机的十六进制颜色值
            getRandomColor() {
                const letters = '0123456789ABCDEF';
                let color = '#';
                for (let i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                console.log(color)
                return color;
            }
            drawSpheres() {  // 绘制球
                this.spheres.forEach(sphere => {  // 遍历球数组
                    this.ctx.beginPath();  // 开始路径
                    this.ctx.arc(sphere.x, sphere.y, sphere.radius * (100 / (100 + sphere.z)), 0, 2 * Math.PI);  // 绘制圆

                    if (sphere.isout) {
                        sphere.color = this.getRandomColor();
                        sphere.isout = false;
                    }

                    this.ctx.fillStyle = sphere.color;  // 设置填充颜色
                    this.ctx.fill();  // 填充
                    this.ctx.stroke();  // 绘制边框
                });  // 遍历结束
            }  // 绘制结束
            drawImageObject() {
                this.ctx.drawImage(
                    this.imageObject.image,
                    this.imageObject.x,
                    this.imageObject.y,
                    this.imageObject.width,
                    this.imageObject.height
                );
            }
            drawRectangle() {  // 绘制矩形
                this.ctx.beginPath();  // 开始路径
                this.ctx.rect(this.rectangle.x, this.rectangle.y, this.rectangle.width, this.rectangle.height);  // 绘制矩形
                this.ctx.fillStyle = 'red';  // 设置填充颜色
                this.ctx.fill();  // 填充
                this.ctx.stroke();  // 绘制边框


            }  // 绘制结束

            checkCollision() {  // 检查碰撞
                this.spheres.forEach((sphere, index) => {  // 遍历球数组
                    let dx = sphere.x - Math.max(this.rectangle.x, Math.min(sphere.x, this.rectangle.x + this.rectangle.width));  // 计算x方向距离
                    let dy = sphere.y - Math.max(this.rectangle.y, Math.min(sphere.y, this.rectangle.y + this.rectangle.height));  // 计算y方向距离
                    let distance = Math.sqrt(dx * dx + dy * dy);  // 计算距离

                    if (distance < sphere.radius * (100 / (100 + sphere.z))) {  // 如果距离小于半径
                        this.score += 1;  // 分数加1
                        document.getElementById('scoreDisplay').innerText = '分数: ' + this.score;  // 更新分数显示
                        this.resetSphere(index);  // 重置球
                    }  // 条件结束
                    if (sphere.y > this.canvas.height) {  // 如果球超出画布
                        this.resetSphere(index);  // 重置球
                    }  // 条件结束
                });  // 遍历结束
            }  // 检查结束

            resetSphere(index) {  // 重置球
                this.spheres[index].isout = true;
                this.spheres[index].x = Math.random() * this.canvas.width;  // 随机x坐标
                this.spheres[index].y = 0;  // y坐标归零
                this.spheres[index].z = Math.random() * 100;  // 随机z坐标
            }  // 重置结束

            update() {  // 更新
                this.spheres.forEach(sphere => {  // 遍历球数组
                    sphere.y += sphere.speed;  // 更新y坐标
                });  // 遍历结束

                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);  // 清空画布

                this.drawSpheres();  // 绘制球
                // this.drawRectangle();  // 绘制矩形
                this.drawImageObject();
                this.checkCollision();  // 检查碰撞

                requestAnimationFrame(this.update.bind(this));  // 请求动画帧
            }  // 更新结束

            handleMouseMove(evt) {  // 鼠标移动事件处理
                evt.preventDefault();

                let rect = this.canvas.getBoundingClientRect();

                let clientX, clientY;

                if (evt.touches && evt.touches.length > 0) {
                    // Touch event
                    clientX = evt.touches[0].clientX;
                    clientY = evt.touches[0].clientY;
                } else {
                    // Mouse event
                    clientX = evt.clientX;
                    clientY = evt.clientY;
                }

                // Adjust image position based on mouse/touch movement
                this.imageObject.x = clientX - rect.left - this.imageObject.width / 2;
                this.imageObject.y = clientY - rect.top - this.imageObject.height / 2;

                this.rectangle.x = clientX - rect.left - this.rectangle.width / 2;
                this.rectangle.y = clientY - rect.top - this.rectangle.height / 2;
            }  // 处理结束
        }  // 类结束

        new Game();  // 创建游戏实例
    </script>
</body>

</html>